import React,{useEffect,useState} from 'react'
import { Layout, Menu } from 'antd';
import {
  HomeOutlined,
  UsergroupAddOutlined,
  CrownOutlined,
  UnorderedListOutlined,
  OrderedListOutlined,
  AlignLeftOutlined,
  DeleteOutlined,
  SlidersOutlined,
  RadarChartOutlined,
  PicLeftOutlined,
  IeOutlined ,
  HighlightOutlined,
  CarryOutOutlined,
  RestOutlined,
  ReconciliationOutlined,
  MacCommandOutlined,
  CloudSyncOutlined,
  ProjectOutlined


} from '@ant-design/icons';
import './index.css'
import {withRouter} from 'react-router-dom'
import axios from 'axios'
import { connect } from 'react-redux';
const { Sider } = Layout;
const { SubMenu } = Menu;
const iconList={
  "/user-manage":<SlidersOutlined />,
  "/home":<HomeOutlined />,
  "/user-manage/list":<UsergroupAddOutlined />,
  "/right-manage/role/list":<UnorderedListOutlined />,
  "/right-manage/right/list":<CrownOutlined />,
  "/news-manage/add":<OrderedListOutlined/>,
  "/news-manage/category":<AlignLeftOutlined />,
  "/news-manage/draft":<DeleteOutlined />,
  "/right-manage":<RadarChartOutlined />,
  "/news-manage":<PicLeftOutlined />,
  "/audit-manage":<HighlightOutlined />,
  "/audit-manage/audit":<CarryOutOutlined />,
  "/audit-manage/list":<CloudSyncOutlined />,
  "/publish-manage/unpublished":<MacCommandOutlined />,
  "/publish-manage/sunset":<ReconciliationOutlined />,
  "/publish-manage/published":<RestOutlined />,
  "/publish-manage":<ProjectOutlined />
}

function SideMenu(props) {
  const {role:{rights}}=JSON.parse(localStorage.getItem("token"))
  const [menu,setMenu]=useState([])
  useEffect(()=>{
    axios.get("/rights?_embed=children").then(res=>{
    setMenu(res.data)
    })
  },[])
  const renderMenu = (menuList) => {
    return menuList.map(item => {
      if (item.children?.length>0&&checkPagePermission(item)) {
        return <SubMenu key={item.key} icon={iconList[item.key]} title={item.title}>
          {/* {item.children.map(item=>{
          return<Menu.Item key={item.key}icon={item.icon}>{item.title}</Menu.Item>
          
        })} */}
          {
            renderMenu(item.children)
          }
        </SubMenu>
      }
      return checkPagePermission(item)&&<Menu.Item key={item.key} icon={iconList[item.key]} onClick={()=>{props.history.push(item.key)}}>{item.title}</Menu.Item>
    })
 
  }
  
 const checkPagePermission=(item)=>{
    return item.pagepermisson===1&&rights.includes(item.key)
  }
  const selectKeys=[props.location.pathname]
//  selectKeys.split("/").splice(0,1,"/")
  const openKeys=["/"+props.location.pathname.split("/")[1]]
  return (
    <Sider trigger={null} collapsible collapsed={props.isCollapsed}>
      <div style={{display:"flex",height:"100%",flexDirection:"column"}}>
      <div className="logo">
      
      <IeOutlined  className="globalchart"/>
        全球新闻发布管理系统
        <IeOutlined  className="globalchart"/>
        </div>
      <div style={{flex:1,overflow:"auto"}}>
      <Menu theme="dark" mode="inline" selectedKeys={selectKeys} defaultOpenKeys={openKeys}>
        {/* <Menu.Item key="1" icon={<UserOutlined/>}>
              nav 1
            </Menu.Item>
            <Menu.Item key="2" icon={<VideoCameraOutlined />}>
              nav 2
            </Menu.Item>
            <Menu.Item key="3" icon={<UploadOutlined />}>
              nav 3
            </Menu.Item>
            <SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
          <Menu.Item key="9">Option 9</Menu.Item>
          <Menu.Item key="10">Option 10</Menu.Item>
          <Menu.Item key="11">Option 11</Menu.Item>
          <Menu.Item key="12">Option 12</Menu.Item>
        </SubMenu> */}



        {renderMenu(menu)}
      </Menu>
      </div>
      </div>
    </Sider>

  )
}

const mapStateToProps=({CollapsedReducer:{isCollapsed}})=>{
  // console.log(isCollapsed)
  return { 
    
    isCollapsed
  }
}

export default connect(mapStateToProps)(withRouter(SideMenu))